<template>
  <div>
    <Tabs value="name1">
      <TabPane label="驾驶员角色分配" name="name1">
        <Card shadow>
          <Content>
            <Row>
              <Col span="4" style="background-color: #fff">
                  <Menu width="auto" :theme="theme3" active-name="1" @on-select="selectMenu">
                    <MenuItem name="0">
                      <Icon type="md-document" />
                      全部用户
                    </MenuItem>
                    <MenuGroup title="超级管理员">
                      <MenuItem name="1">
                        <Icon type="md-document" />
                        系统管理员
                      </MenuItem>
                    </MenuGroup>
                    <MenuGroup title="其他管理员">
                      <MenuItem name="2">
                        <Icon type="md-document" />
                        一级管理员
                      </MenuItem>
                      <MenuItem name="3">
                        <Icon type="md-document" />
                        二级管理员
                      </MenuItem>
                      <MenuItem name="4">
                        <Icon type="md-document" />
                        三级管理员
                      </MenuItem>
                    </MenuGroup>
                    <MenuGroup title="普通用户">
                      <MenuItem name="5">
                        <Icon type="md-leaf" />
                          驾驶员
                      </MenuItem>
                    </MenuGroup>
                  </Menu>
              </Col>
              <Col span="20">
                <Card >
                  <header>
                    <Row>
                      <Col span="10" >
                        <span style="font-size: 16px;margin: 10px ">请选择部门:</span>
                        <Select v-model="roleQuery.department" style="width:250px" size="large">
                          <Option v-for="(organization,i) in organizations" :value="organization.corganCode" :key="i">{{organization.corganName}}</Option>
                        </Select>
                      </Col>
                      <Col span="8" style=" margin-bottom: 20px">
                        <span style="font-size: 16px">状态：</span>
                        <Select v-model="roleQuery.status" style="width:200px" size="large">
                          <Option v-for="item in statusList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                        </Select>
                      </Col>
                      <Col span="3">
                        <Button type="primary" @click="queryList" icon="ios-search" size="large" ghost>查询</Button>
                      </Col>
                    </Row>
                  </header>
                  <Content style="margin-left:10px;">
                    <Table ref="selection" :loading="loading" :columns="columns1" :data="data1" size="large">
                      <template slot-scope="{ row, index }" slot="operation">
                        <Button size="small"  type="primary" style="margin-right: 20px" @click="editItem(index)"
                                custom-icon="iconfont icon-edit">
                          编辑
                        </Button>
<!--                        <Button   size="small" @click="remove(index)" custom-icon="iconfont icon-trash"  type="error" >删除</Button>-->
                      </template>
                    </Table>
                    <div style="margin: 10px;overflow: hidden">
                      <div style="float: right;">
                        <Page :total="100" :current="roleQuery.currentPage" @on-change="changePage"  @on-page-size-change="changeSize" show-elevator show-sizer></Page>
                      </div>
                    </div>
                  </Content>
                </Card>
              </Col>
            </Row>
          </Content>
        </Card>
      </TabPane>
      <TabPane label="角色权限设置" name="name2">
        <div class="content">
          <Card shadow>
            <Content>
              <Row>
                <Col span="4" style="background-color: #fff">
                  <Menu width="auto" :theme="theme3" active-name="1" @on-select="selectMenu2">
                    <MenuGroup title="超级管理员">
                      <MenuItem name="1">
                        <Icon type="md-document" />
                        系统管理员
                      </MenuItem>
                    </MenuGroup>
                    <MenuGroup title="其他管理员">
                      <MenuItem name="2">
                        <Icon type="md-document" />
                        一级管理员
                      </MenuItem>
                      <MenuItem name="3">
                        <Icon type="md-document" />
                        二级管理员
                      </MenuItem>
                      <MenuItem name="4">
                        <Icon type="md-document" />
                        三级管理员
                      </MenuItem>
                    </MenuGroup>
                    <MenuGroup title="普通用户">
                      <MenuItem name="5">
                        <Icon type="md-leaf" />
                        驾驶员
                      </MenuItem>
                    </MenuGroup>
                  </Menu>

                </Col>
                <Col span="20">
                  <Card >
                    <header>
                      <div>
                        <h2 style="display: block">蓝鲸观察者</h2>
                        <span style="font-size: 15px; display: block;margin-top:10px">蓝鲸观察者预设所有对象的查看列表及详情权限</span>
                      </div>

                    </header>
                    <Content style="margin-left:10px;">
                      <div>
                        <div style="margin-top: 30px">
                          <span style="font-size: 18px">车队架构管理</span>
                          <a style="font-size: 15px;margin-left: 20px" href="#">设置字段权限</a>
                          <Divider style="margin-top:10px" />
                        </div>
                        <div style="border-bottom: 1px  #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
                          <Checkbox
                            :indeterminate="indeterminate"
                            :value="checkAll"
                            size="large"
                            @click.prevent.native="handleCheckAll">全选</Checkbox>
                        </div>
                        <CheckboxGroup v-model="roleQuery2.permission" @on-change="checkAllGroupChange" >
                          <Checkbox label="查看列表" size="large" class="checkBoxItem"></Checkbox>
                          <Checkbox label="查看详情" size="large" class="checkBoxItem"></Checkbox>
                          <Checkbox label="停用" size="large" class="checkBoxItem"></Checkbox>
                          <Checkbox label="新建员工" size="large" class="checkBoxItem"></Checkbox>
                          <Checkbox label="编辑" size="large" class="checkBoxItem"></Checkbox>
                          <Checkbox label="禁止登陆" size="large" class="checkBoxItem"></Checkbox>
                          <Checkbox label="恢复" size="large" class="checkBoxItem"></Checkbox>
                          <Checkbox label="允许登陆" size="large" class="checkBoxItem"></Checkbox>
                          <Checkbox label="重置密码" size="large" class="checkBoxItem"></Checkbox>
                        </CheckboxGroup>
                      </div>
                    </Content>
                  </Card>
                </Col>
              </Row>
            </Content>
          </Card>
        </div>
      </TabPane>
    </Tabs>
    <Modal
      v-model="modal1"
      title="编辑">
      <Form :model="formItem" :label-width="80">
        <FormItem label="职位">
          <Select v-model="formItem.uroleId">
            <Option v-for="(role,i) in roles" :value="role.uroleId" :key="i">{{role.uroleName}}</Option>
          </Select>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="submit" type="primary">更新</Button>
        <Button @click="resetForm" type="primary">取消</Button>
      </div>
    </Modal>
  </div>
</template>

<script src="./role-permission.js">
</script>

<style lang="css" scoped>
@import "../../../assets/icons/iconfont.css";
.content {
  /*关键代码*/
  position: relative;
  height: 100%;
  width: auto;
}

tab-pane {
  height: 800px;
  width: 800px;
}
/*修改iview原生primary类型按钮颜色*/
/*.ivu-btn-primary {*/
/*  color: #fff;*/

/*}*/

.query {
  margin-left: 50px;
  background-color: #409eff;
  border-color: #409eff;
}

.ivu-btn-ghost.ivu-btn-dashed, .ivu-btn-ghost.ivu-btn-default {
  color: #000;
  border-color: #000;
}

.checkBoxItem{
  margin-right: 60px;
}



</style>
